<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>Your First Shape</title>
    <meta name="order" content="01">
  </head>
  <body>
    <h2>Your First Shape</h2>
        <p>
      Let's begin with a collection contains a simple shape that provide
      a text Hello World. This shape contains Properties definition,
      elements definition in the Content section and the behaviors that make content changed to property values.</p>
    <pre name="code" class="xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
    &lt;Shapes xmlns="http://www.evolus.vn/Namespace/Pencil"
            xmlns:p="http://www.evolus.vn/Namespace/Pencil"
            xmlns:svg="http://www.w3.org/2000/svg"
            id="collection" displayName="My Collection"
            description="My First Collection" author="author"&gt;
      &lt;Shape id="helloworld" displayName="Hello World"
             icon="Icons/plain-text.png"&gt;
        &lt;Properties&gt;
          &lt;PropertyGroup name="Text"&gt;
            &lt;Property name="label" displayName="Label" 
                      type="PlainText"&gt;Hello World&lt;/Property&gt;
            &lt;Property name="textColor" displayName="Color"
                      type="Color"&gt;#000000ff&lt;/Property&gt;
            &lt;Property name="textFont"
                      displayName="Font"
                      type="Font"&gt;Arial|normal|normal|13px&lt;/Property&gt;
          &lt;/PropertyGroup&gt;
        &lt;/Properties&gt;
        &lt;Behaviors&gt;
          &lt;For ref="text"&gt;
            &lt;TextContent&gt;$label&lt;/TextContent&gt;
            &lt;Fill&gt;$textColor&lt;/Fill&gt;
            &lt;Font&gt;$textFont&lt;/Font&gt;
            &lt;BoxFit&gt; 
              &lt;Arg&gt;new Bound(0, 0, 100, 12)&lt;/Arg&gt;
              &lt;Arg&gt;new Alignment(0, 1)&lt;/Arg&gt;
            &lt;/BoxFit&gt;
          &lt;/For&gt;
        &lt;/Behaviors&gt;
        &lt;p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil"
                   xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;text id="text" /&gt;
        &lt;/p:Content&gt;
      &lt;/Shape&gt;
    &lt;/Shapes&gt;</pre>
    <p>Each child node in <code>&lt;For&gt;&lt;/For&gt;</code> is an behavior that defines how content should be changed
    according to the properties. More details about can be found at the <a href="~/wiki/ref/Behaviors.html">Behavior Reference</u>.</p>
    <p>The <code>$label</code> variable is used in the <code><a href="~/wiki/ref/Behaviors.html#textcontent">TextContent</a></code> behavior in this example shows you the
    way properties can be referenced in the input arguments for behaviors.</p>
  </body>
</html>
